<template>
	<view class="content">
		
		<view class="list"v-for="(item, index) in list" :key="index">
			<view class="item">
				<view class="base">
					<view class="num">
						<image v-if="index<3" class="ele numImg" :src="numImg[index]"></image>
						<view v-if="index>=3" class="ele support-circle"><text class="support-num">{{index+1}}</text> </view>
					</view>
					<image v-if="item.headImgUrl != null && item.headImgUrl.length>0" class="ele logImg" :src="item.headImgUrl"></image>
					<image v-else class="ele logImg" src="../../../static/img/my/default-logo.png"></image>
					<view v-if="item.nickName != null && item.nickName.length>0" class="ele nickName">{{item.nickName}}</view>
					<view v-else class="ele nickName">待授权</view>
					<view class="ele count">{{item.correntCount}}题</view>
				</view>
			</view>
		</view>
		
		<view class="noMore" v-show="isNoMore">暂无更多数据...</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isNoMore:false,
				page:1,
				numImg:[
					'../../../static/img/my/tool/rank/rank0.png',
					'../../../static/img/my/tool/rank/rank1.png',
					'../../../static/img/my/tool/rank/rank2.png'
				],
				list:[
				]
			}
		},
		onShow() {
			this.list=[];
			this.getData(1);
		},
		methods:{
			getData(page){
				let opts = {
					url: 'myRank/rankDetail/'+page,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					if(rData.length ==0){
						uni.showToast({
							title: '暂无更多数据...',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.isNoMore = true;
						return;
					}
					for (let i = 0; i < rData.length; i++) {
						this.list.push(rData[i]);
					}
				}, error => {})
			}
		},onReachBottom() {
			this.page++;
			this.getData(this.page);
		}
	} 
</script>

<style>
	
	.base .num{
		width: 80rpx;
	}
	.support-num{
	  font-size: 30rpx;
	  height:50rpx;
	  line-height:50rpx;
	  display:block;
	  font-weight: 800;
	  color:#fff;
	  text-align:center;
	}
	
	.numImg{
		width: 80rpx;
		margin-right: 20rpx;
		height: 80rpx;
		margin-top: 10rpx;
	}
	
	.support-circle{
	  width:50rpx;
	   margin-top: 20rpx;
	   margin-right: 40rpx;
	   margin-left: 10rpx;
	  height:50rpx;
	  background-color: #817936;
	  border-radius:25rpx;
	}
	
	.item{
		background-color: #fff;
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
	}
	.logImg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}
	.base{
		padding: 15rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}
	.base .ele{
		float: left;
		line-height: 100rpx;
	}
	.base .nickName{
		width: 350rpx;
		text-align: center;
		margin: 0 20rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.base .count{
		font-size: 38rpx;
		font-weight: 800;
		width: 80rpx;
		color: #007AFF;
	}
	
</style>